<template>
  <a-card style="width: 100%; height: 100%">
    <template #title>
      <h2>文章管理模块</h2>
      <a-form layout="inline" :model="essaysQuery">
        <a-form-item>
          <a-input v-model:value="essaysQuery.title" placeholder="标题">
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input v-model:value="essaysQuery.description" placeholder="介绍">
          </a-input>
        </a-form-item>
        <a-form-item>
          <span class="font-size">点赞：</span>
          <a-switch
            v-model:checked="essaysQuery.supported"
            placeholder="介绍"
          />
        </a-form-item>
        <a-form-item>
          <span class="font-size">时间：</span>
          <a-switch v-model:checked="essaysQuery.sorted" />
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="getEssays(1, limit)">
            查询
          </a-button>
        </a-form-item>

        <a-form-item>
          <a-button @click="getClear()"> 清除 </a-button>
        </a-form-item>
      </a-form>
    </template>
    <a-table
      size="middle"
      :dataSource="essays"
      :columns="columns"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.key === 'description'">
          <a-typography-text
            :style="true ? { width: '200px' } : {}"
            ellipsis="true"
            :content="text"
          />
        </template>
        <template v-if="column.key === 'content'">
          <a-button type="primary" @click="findEssays(text.id)"
            ><eye-outlined /> 查看</a-button
          >
          <a-popconfirm
            title="你确定要删除该文章吗?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="deleteEssays(text.id)"
          >
            <a-button style="margin-left: 20px" danger>
              <delete-outlined key="delete" /> 删除
            </a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
  </a-card>
</template>

<script>
import { DeleteOutlined, EyeOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import userApi from "@/apis/userApi";
import { computed, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "Essays",
  components: {
    DeleteOutlined,
    EyeOutlined,
  },
  setup() {
    const router = useRouter();
    const store = useStore();
    const user = store.state.user;

    const essaysQuery = reactive({
      title: "",
      description: "",
      supported: false,
      sorted: false,
    });

    const essays = ref([]);

    const total = ref("");
    const current = ref(1);
    const limit = ref(4);

    const pagination = computed(() => ({
      total: total.value,
      current: current.value,
      pageSize: limit.value,
    }));

    const handleTableChange = (pag) => {
      limit.value = pag.pageSize;
      current.value = pag.current;
      getEssays(pag.current, pag.pageSize);
    };

    const getClear = () => {
      (essaysQuery.title = ""),
        (essaysQuery.description = ""),
        (essaysQuery.supported = false),
        (essaysQuery.sorted = false);
      getEssays();
    };

    const getEssays = (current, limit) => {
      userApi.essaysList(user.id, current, limit, essaysQuery).then((resp) => {
        essays.value = resp.records;
        total.value = resp.total;
      });
    };

    const deleteEssays = (id) => {
      userApi.deleteEssay(id, user.id).then(() => {
        getEssays(current.value, limit.value);
      });
    };

    const findEssays = (id) => {
      console.log(id);
        router.push({ name: "EssaysView", params: { essayId: id } });
    };

    onMounted(() => {
      getEssays(current.value, limit.value);
    });

    const columns = [
      {
        title: "标题",
        dataIndex: "title",
        key: "title",
      },
      {
        title: "描述",
        dataIndex: "description",
        key: "description",
      },
      {
        title: "作者",
        dataIndex: "author",
        key: "author",
      },
      {
        title: "点赞数",
        dataIndex: "support",
        key: "support",
      },
      {
        title: "功能",
        key: "content",
      },
    ];

    return {
      essaysQuery,
      essays,
      total,
      current,
      limit,
      pagination,
      columns,
      handleTableChange,
      getClear,
      deleteEssays,
      getEssays,
      findEssays,
    };
  },
};
</script>

<style scoped>
</style>